<template>
	<view>
		<p style="text-align: left;">修改密码</p>
		<view class="form">
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>旧密码:
					</view>
					<input type="password" v-model="oldPwd" placeholder="请输入旧密码" 
						style="border-bottom: 1px solid #ddd;" maxlength="11" autofocus />
				</view>
			</view>
			
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>新密码:
					</view>
					<input type="password" v-model="newPwd" placeholder="请输入新密码"
						style="border-bottom: 1px solid #ddd;" maxlength="11" autofocus />
				</view>
			</view>
			
			<view class="form-item">
				<view style="width: 100%;">
					<view class="form-title">
						<span class="iconfont icon-mti-shoukao"></span>确认新密码:
					</view>
					<input type="password" v-model="confirmPassword" placeholder="请确认新密码"
						style="border-bottom: 1px solid #ddd;" maxlength="11" autofocus />
				</view>
			</view>
			
			<button class="submit-btn" @tap="updatePassword">确认修改</button>
		</view>
	</view>
</template>

<script>
	import { updatePassword } from "../../api/index.js"
	export default {
		data() {
			return {
				oldPwd: '',
				newPwd: '',
				confirmPassword: ''
			}
		},
		methods: {
			updatePassword() {
				// 判断输入是否为空
				if(this.oldPwd.trim() === '' || this.newPwd.trim() === '' || this.confirmPassword.trim() === '') {
					uni.showToast({
						title: '输入不能为空',
						icon: 'error'
					});
					return;
				}
				
				// 判断新密码是否一致
				if(this.newPwd !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				}
				
				// 获取token
				const token = uni.getStorageSync('token');
				
				// 组合数据
				const data = {
					oldPwd: this.oldPwd,
					newPwd: this.newPwd,
					confirmPassword: this.confirmPassword
				}
				updatePassword(data).then(res=>{
					if(res.data.status === 0){
						uni.showToast({
								title: '修改成功',
								icon: 'success'
							});
							// 清除本地存储
							uni.clearStorageSync("token");
							uni.clearStorageSync("userInfo");
						
						// 延迟跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
								url: '/pages/login/login'
								});
							},600);
					}else{
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				
				})
				// 发送请求
				// uni.request({
				// 	url: 'http://8.140.198.52:8001/webapi/updatepwd',
				// 	method: 'POST',
				// 	header: {
				// 		Authorization: uni.getStorageSync('token')
				// 	},
				// 	data: data,
				// 	success: (res) => {
				// 		console.log(res);
				// 		if(res.data.status === 0) {
				// 			uni.showToast({
				// 				title: '修改成功',
				// 				icon: 'success'
				// 			});
				// 			// 清除本地存储
				// 			uni.clearStorageSync("token");
				// 			uni.clearStorageSync("userInfo");
						
				// 		// 延迟跳转到登录页
				// 			setTimeout(() => {
				// 				uni.reLaunch({
				// 				url: '/pages/login/login'
				// 				});
				// 			},600);
							
				// 		} 
						
						
				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: '修改失败',
				// 			icon: 'none'
				// 		});
				// 	}
				// });
			}
		}
	}
</script>

<style>
.page {
	background: linear-gradient(#b2cfed, #ffff);
	width: 100%;
	height: 100vh;
}

.form {
	padding: 30rpx;
	margin-top: 50rpx;
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.form-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

input {
	width: 100%;
	height: 60rpx;
	font-size: 28rpx;
	padding: 0 20rpx;
}

.submit-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #4a90e2;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
	margin-top: 50rpx;
}


</style>
